<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <link rel="stylesheet" href="../../css/api.css">
      <link rel="stylesheet" href="../../css/base_bai/base.css">
      <title>我的红包账单</title>

      <style>

        html, body{font-size: 100%;background: #F5F5F5}
        .price{background: white;border-radius: .5rem;padding: 1rem 1rem 2rem; margin: .5rem;}
         .price>div{display: flex;align-items: center;       }
         .price>div>div{flex:1;}

         .price [p_sty]>div:nth-child(1){font-size: 0.75rem;padding-left: .4rem;}
         .price [p_sty]>div:nth-child(2){color:#FF9900;font-weight: 700;font-size: .9rem;line-height: 2rem;padding-left: .4rem;}

         .price>div:nth-child(2){color:#979899;font-size:.8rem;float: right;padding:.5rem}
         .price [sub_sty]{border: 1px solid #FF9900;  color: #FF9900;border-radius: 2rem;height: 34px;line-height: 32px;}

         .prompt{display: flex;margin:1rem;}
         .prompt [font_sty]{color:#979899;font-size:.8rem;    padding-left: .2rem;}


         .redPack_list{    display: flex;padding: 1rem;background: white;border-bottom: 1px solid #f3f3f3;align-items: center;}
         .redPack_list>div:nth-child(1){flex:1}
         .redPack_list>div:nth-child(1)>div{line-height: 2rem}
         .redPack_list p{color: #979899;font-size: 0.7rem}
      </style>
  </head>
  <body>
  <div id="app" v-cloak>

    <div>
        <van-nav-bar class="m-header" title="我的红包账单" left-arrow @click-left="  closeWin()" />
    </div>


  <div>

    <div class="price">
             <div>
               <div p_sty>
                 <div >已提现金额</div>
                   <div>1988.00元</div>
               </div>
               <div p_sty>
                 <div >待提现金额</div>
                   <div>2000.00元</div>
               </div>
               <div style="    text-align: center;">
               <van-button  sub_sty >立即提现</van-button>
               </div>
             </div>
             <div >绑定服务号【XXX】可享受快捷提现服务</div>
       </div>

      <div class="prompt"><div><van-icon name="info-o" color="#1B91FF" /></div><div font_sty>正常提现24小时到账，节假日顺延</div></div>

      <div>
        <van-tabs v-model="active" line-width="0" title-active-color="#FF9900">
          <van-tab title="红包记录">
         <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

          <div class="redPack_list"  v-for="item in list" :key="item"  :title="item" >
              <div>
                <div>来自【王老吉】的红包</div>
                <p>10-11 17:58:14</p>
              </div>
              <div style="color:#FF540A;font-weight: 700;">+ 0.25</div>

          </div>
          </van-list>

          </van-tab>
          <van-tab title="提现记录">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

             <div class="redPack_list"  v-for="item in list" :key="item"  :title="item" >
                 <div>
                   <div>提现50元</div>
                   <p>10-11 17:58:14</p>
                 </div>
                 <div style="color:#FF9900">待打款</div>

             </div>
             </van-list>

          </van-tab>

        </van-tabs>
      </div>


  </div>



  </div>
  </body>
  <script src="../../script/api.js"></script>
  <script src="../../script/base_bai/vue.js"></script>
  <script src="../../script/base_bai/vant.js"></script>
  <script src="../../script/base_bai/base.js"></script>
  <script src="../../script/base_bai/temp.js"></script>
  <script type="text/javascript">
      apiready = function(){
            headerH = $api.fixStatusBar($api.byId('app'));
        Vue.prototype.$ac = api;
        initVue()
      };
      if (BrowserType() == 'pc') {
          initVue()
      }
      function initVue() {
          new Vue({
              el: '#app',

            data:{
            comment:"",
            score:3,
             active: 0,
             list: [],
             loading: false,
             finished: false
            },
            methods: {
              onLoad() {

                // 异步更新数据
                setTimeout(() => {
                  for (let i = 0; i < 10; i++) {
                    this.list.push(this.list.length + 1);
                  }
                  // 加载状态结束
                  this.loading = false;

                  // 数据全部加载完成
                  if (this.list.length >= 10) {
                    this.finished = true;
                  }
                }, 500);
              }
            }

          })
      }
  </script>
  </html>
